<template>
  <div class="componentsBreadcrumb">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item
        v-for="(item, index) in routerData"
        :key="index"
        @click.native="handelJumpRouter(item, index)"
      >
        {{ item.name }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      routerData: [],
    }
  },
  watch: {
    $route(n, o) {
      this.handelFetchRoute()
    },
  },
  created() {
    this.handelFetchRoute()
  },
  methods: {
    // 跳转路由
    handelJumpRouter(item, index) {
      // 父路由名 当前路由名
      const notJumpRule = [
        { parentName: 'Teacher', currName: 'Teaching' },
        { parentName: 'Creative', currName: 'coursesList' },
        { parentName: 'Courses', currName: 'cStore' },
      ]
      const notJumpRuleArr = notJumpRule.filter((ruleItem) => {
        return (
          ruleItem.parentName == this.$route.matched[0].name &&
          ruleItem.currName == this.$route.name
        )
      })
      // 如果当前路由名在currName中 跳转父路由时默认重定向到当前路由名的时候阻止跳转
      if (notJumpRuleArr.length) return
      if (index !== this.routerData.length - 1) {
        this.$router.push({
          name: item.routeName,
          query: item.query,
          params: item.params,
        })
      }
    },
    // 获取当前路由参数
    handelFetchRoute() {
      let newRouteData = []
      let isNotNavRouterName = ['Detail', 'Question', 'Progress', 'Vote']
      this.$route.matched.forEach((item, index) => {
        if (isNotNavRouterName.indexOf(item.name) == -1) {
          newRouteData[index] = {
            path: item.path,
            routeName: item.name,
            name: item.meta.name,
            query: {},
            params: {},
          }
          if (index == this.$route.matched.length - 2) {
            this.$set(newRouteData[index], 'query', this.$route.query)
            this.$set(newRouteData[index], 'params', this.$route.params)
          }
        }
      })
      this.routerData = newRouteData
    },
  },
}
</script>

<style lang="stylus">
.componentsBreadcrumb {
  height: 19px;

  .el-breadcrumb {
    height: 100%;
    line-height: unset;
  }

  .el-breadcrumb__inner, .el-breadcrumb__inner.is-link {
    cursor: pointer;
    font-family: PMingLiU-ExtB;
    font-size: 14px;
    font-weight: unset;
    color: #ffffff !important;
    opacity: 0.5;
  }

  .el-breadcrumb__item {
    line-height: 1;
  }

  .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
    color: #ffffff;
    opacity: 0.5;
  }
}
</style>